<template>
  <div class="groupManner">
     <el-button type="primary" size="small"  style="margin-bottom:20px;" @click="add">新建分组</el-button>
     <!--table -->
      <el-table
        :data="tableData"
        v-loading="loading"
        :header-cell-class-name="headerStyle"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="分组名称"
          show-overflow-tooltip
          width="250">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="describe"
          label="分组描述"
          width="300">
        </el-table-column>
        <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                  <el-button
                      size="mini"
                      type="text"
                      @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button
                      size="mini"
                      type="text"
                      @click="check(scope.row.id) ">查看用户</el-button>
              </template>
        </el-table-column>
      </el-table>
     <!--分页 -->
      <el-pagination
        style="text-align: right; margin-top: 20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[5, 10, 20, 30]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    <!--对话框 -->
      <el-dialog title="设置分组" 
        :visible.sync="dialogFormVisible"
        :before-close="handleClose"
        width="50%"
        >
        <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <div class="box">
            <el-form-item label="分组名称" label-width="100px" prop="name">
                <el-input style="width:400px;" v-model="ruleForm.name" auto-complete="off" maxlength="20" placeholder="请输入分组名称"></el-input>
            </el-form-item>
          </div>
          <div class="box">
            <el-form-item label="分组描述" label-width="100px" prop="describe" >
                <el-input style="width:400px;" type="textarea" v-model="ruleForm.describe"  maxlength="100" :rows="5" placeholder="请输入分组描述"  autoHeight="true"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="submitForm('ruleForm')">提交</el-button>
          <el-button  size="small" @click="cancle('ruleForm')">取 消</el-button>
        </div>
      </el-dialog>
      <Dialogs v-if="isShow"  :vilable= visible :showGroup= false :groupId= id @childClose= parentClose></Dialogs>
  </div>
</template>

<script>
import systemApi from "@/api/lejv/system"
import Dialogs from "@/layout/components/Dialogs"
import _ from "lodash"; //引入lodash
export default {
  name: "groupManner",
  components:{
    Dialogs
  },
  data() {
    return {
      id: -1,
      isShow:false,
      total: 0,
      pageSize:5,
      pageNum:1,
      ruleForm:{
        name:"",
        describe:""
      },
      loading: false,
      dialogFormVisible:false,
      visible:false,
      isadd:false,
      rules: {
        name: [
          { required: true, message: '请输入分组名称', trigger: 'blur' }
        ],
      },
      tableData:[
        {
          
          describe:'全局',
          name:'还ksooxommcomoc记122'
        },
        {
        
          describe:'全局',
          name:'还记得nsinscinsn12的'
        },
        {
       
          describe:'全局',
          name:'还记得是1msocmsmc1我的uicisndekiniinxusucucducducnncsinsincsncbnscu'
        }
      ]
    };
  },
  computed: {},
  created() {
    this.initData();
   },
  mounted() {
   
  },
  methods: {
    initData(){     //列表初始化
      this.loading=true 
      let obj={
        pageSize:this.pageSize,
        pageNum:this.pageNum
      }

      obj = _.pickBy(obj,(item) =>item) //使用lodash进行过滤参数为空的搜索条件

      systemApi.getGroupList(obj)
      .then(res=>{
        console.log(res)
        if(res.msg="success"){
          this.loading = false
          if(res.data){
            this.tableData=res.data.groups
            this.total= res.data.totalElements
          }else{
            this.tableData=[]
          }
        }
      }).catch(res=>{
        this.loading = false
        console.log(res);
        })
    },
     
    //新增
    add(){
      this.isadd=true
      this.dialogFormVisible=true;
      this.ruleForm.name=""
      this.ruleForm.describe=""
    },  
    addList(){
      
      let params={

        name:this.ruleForm.name,
        describe:this.ruleForm.describe
      }
      console.log(params,this.ruleForm.name)
      params = _.pickBy(params,(item) =>item) //使用lodash进行过滤参数为空的搜索条件
      systemApi.increaseGroup(params)
    .then(res=>{
      if(res.code==0){
        console.log(res)
        this.initData()
      }else{
        this.$message({
          type: "error",
          message: res.msg,
        });
      }
    })
    },  
    //编辑
    handleEdit(row){
      this.isadd=false
      // console.log(row,222,row.id)
      this.ruleForm= row;
      console.log(this.ruleForm.id);
      this.dialogFormVisible=true;  
    },
    handleEditlist(){
       let params={
       "id": this.ruleForm.id,
       "name":this.ruleForm.name,
       "describe":this.ruleForm.describe
      }
        console.log(this.ruleForm.id);
        params = _.pickBy(params,(item) =>item) //使用lodash进行过滤参数为空的搜索条件
         systemApi.updateGroup(params)
    .then(res=>{
      if(res.code==0){
        console.log(res)
      }
    })
    },

    //查看
    check(id){
      this.isShow=true
      console.log(id)
      this.visible = true
      this.id = id
      // this.checkCustomer()
    },
  //   checkCustomer(){
  //      let obj={
  //       pageSize:this.pageSize,
  //       pageNum:this.pageNum,
  //       groupId:'1',
  //       username:this.username,
  //       // name:
  //     }
  // obj = _.pickBy(obj,(item) =>item) //使用lodash进行过滤参数为空的搜索条件

  //     systemApi.getGroupList(obj)
  //     .then(res=>{
  //       console.log(res)
  //       if(res.msg="success"){
  //         this.loading = false
  //         if(res.data){
  //           this.tableData=res.data.groups
  //           this.total= res.data.totalElements
  //         }else{
  //           this.tableData=[]
  //         }
  //       }
  //     }).catch(res=>{
  //       this.loading = false
  //       console.log(res);
  //       })

  //   },
    //关闭
    handleClose(done) {
      done()
      this.$refs.ruleForm.resetFields();
      },
    //提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) { 
           this.dialogFormVisible=false; 
          if(this.isadd){
            this.addList()
            
          }else{
            this.handleEditlist()  
          }
          this.$message({
                      type:'success',
                      message:'成功创建分组'
                    })
        }else{
           console.log('error submit!!');
          // this.cancle(formName)
          return false;
        } 
        // else {
        // }
      });
     
    },
    //取消
    cancle(formName){
      if(this.isadd){
        this.$refs.ruleForm.resetFields();
        this.dialogFormVisible=false;
      
        // this.ruleForm = this.$options.data().ruleForm
      }else{
        this.$refs.ruleForm.resetFields();
        this.dialogFormVisible=false;
        this.isAdd = false;
        this.initData();
        
      }
      // this.$refs[formName].resetFields();
      console.log(12)
    },
    //组件选择产品弹窗
    parentClose(){
      this.visible = !this.visible
      this.isShow=!this.isShow
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.initData();
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return "tableStyle";
    },
  }
};
</script>

<style scoped lang="scss">
.groupManner {
  margin: 20px;
  margin-top:40px ;
}

::v-deep .el-dialog__header{
    border-bottom: 1px solid #E0E0E0 ;
  }
.box{
    display: flex;
    align-items:left ;
  }
::v-deep .el-textarea .el-textarea__inner{
    min-height:80px;
  }
.tableStyle {
  background-color:grey !important;
  color: black;
  font-weight: 400;
}


</style>
